我們先前看過了Angular的範本，接著我們來看看幾個常用的html 標籤。

• <!--...-->
  註解。就是註解。

• <a>
  超連結，屬性 href 指定 url 或檔案，一般是這樣使用：
  

<a href="http://www.google.com">LINK</a>

讓<a></a> 包圍的字被賦予超連結。
要讓其他人下載檔案，可以用download 屬性，href 一樣指向要讓人下載的檔案，download決定這個檔案用甚麼檔名儲存。
如此就可以點連結下載icon，並會以 xxx.ico 為檔名儲存：

<a href="favicon.ico" download="xxx.ico">LINK</a>

• <img>
  顯示圖片，src 指定圖片路徑，alt 指定當圖片載入失敗時，所呈現的字，
  我們先隨便放一張素材到 assets 底下，使用下面的程式碼，就能顯示圖片：

<img src="assets/logo.png" alt="Angular-Logo">

也可以搭配 <a></a> 一起使用，點圖片就會進入連結：

<a href="http://www.google.com">
   <img src="assets/logo.png" alt="Angular-Logo">
</a>

文本

• <pre></pre>
  定義一個文章段落，會保留空格及換行，但到行動裝置上可能會跑版，不推薦使用。

• <p></p>
  定義一個文章段落，會把多餘的空格跟換行字元吃掉，要換行必須用 <br> ，連續輸入空格可以用   。
  兩種定義文本方式的比較:
  

  <p>T&nbsp;&nbsp;E&nbsp;&nbsp;<br>S&nbsp;&nbsp;T&nbsp;</p>
  <pre>
      T     E
      S T
  </pre>

• <h1></h1> 標題標籤，從<h1>到<h6>，數字越大字型越小。
• <b></b> bold ，內容會以粗體字呈現。
• <i></i> Italic ，內容會以斜體字呈現。
• <u></u> UnderLine ，內容會以底線呈現。
• <mark></mark>，螢光筆效果，將文字背景著色。
• <hr> 畫一條水平線
• <br> 換行符號
• <span></span>
  在文本中有一部分文字需要著色時，可以用 <span></span> 把字包起來，再用　style　跟　color　指定顏色：
  
  語法：

<p> TE<span style="color: red">S</span>T</p>

當然，這些符號是可以嵌套使用的：

程式碼如下：

  <p>
    <b>
      Bold<br>
      <i>Bold and Italic</i>
    </b>
    <br>
    <mark>mark</mark>
    <hr>
  </p>

表單

當我們的網站需要登入、註冊、問卷等功能，就需要透過表單來完成。
一個表單使用 <form></form>包起來。

<form action="" method="post">
    username: <input type="text" name="username"><br>
    password: <input type="password" name="password"><br>
    <input type="radio" name="fruit" value="apple">apple<br>
    <input type="radio" name="fruit" value="banana">banana<br>
    <input type="submit" value="Login">
</form>

• form的 action 定義了表單submit時，要往哪裡傳遞表單，比方說xxx.php。method則是決定要用哪種http method提交表單，較常用的是 get 和 post ，差別在於 get 會將表單內容串接在url上，而 post 會將表單資料存在封包中送出，一般人看不到，所以 post 會比 get 安全一些。

• <input> 可以指定type為text作為輸入框，指定為password可以作為密碼輸入框，這樣輸入的字會被隱藏。
  同時 <input> 也可以設定成 radio button ，看上面的範例，type 設為 radio ， name 設定變數名稱為fruit，表示這些選項都屬於 fruit 這個變數，value 則是當這個選項被點選時，要賦予什麼值給這個變數。
  簡單來說，上面的兩個 radio button 都屬於 fruit，那麼送出表單時就會以 fruit=apple 或是 fruit=banana的資料送出。
  當完成一個表單的內容後，我們就用一個 <input type="submit" value="Login"> 作為提交按紐，type 設為 "submit"，value 可以設定按鈕上要顯示的字，當這個按鈕被按下，表單就會被送出到 action 所設定的位置。
  在html5，type又可以指定成email、number等，檢查輸入的內容是否符合email格式、是否符合我們所規定的數字範圍...等等，功能相當多。

List

在html中使用清單，可以用<ul> 或<ol>標籤，當然，這也可以嵌套使用，也就是在Llist裡放List。
<li> 定義一個 List 元素。
<ul> 定義一個無序 List。<ul>可以透過 type 屬性決定樣式，circle、square等等。
<ol> 定義一個有序 List。
<ol> 可以給予 start 屬性決定 List 由哪個數字開始，可以用type決定編號類型，用英文字母、羅馬數字等等。
範例如下：

<ul type='square'>
<li>Apple</li>
<li>Google</li>
<li>Microsoft</li>
<ul>
  <li>Win7</li>
  <li>Win8</li>
  <li>Win10</li>
</ul>
</ul>
<ol start="5">
  <li>Apple</li>
  <ol type="A">
    <li>iPhone</li>
    <li>iPad</li>
  </ol>
  <li>Google</li>
  <li>Microsoft</li>
</ol>

表格

用<table>標籤表示一個表格，每個列 ( row ) 由<tr></tr>組成，再往
<tr></tr>依序填入每個格子的資料。
一個row:

 <tr>
    <th>Fruit</th>
    <th>price</th>
  </tr>

表格中的格子，可以用<th></th>，代表 table header，或是<td></td>，代表 table data。
如下，我在第二個row多放了一個<td></td>，表格就會往右延伸。
指定 border="1"讓表格顯示邊框。

<table border="1">
  <tr>
    <th>Fruit</th>
    <th>price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>100</td>
    <td>Test</td>
  </tr>
  <tr>
      <td>Banana</td>
      <td>200</td>
    </tr>
</table>

你覺得邊框太醜？那我們在<table>加一點屬性：

<table border="1" style="border-collapse:collapse">

就會變得好看一點：

這邊的style是屬於css的寫法，往後我們遇到樣式設定的問題，再用更好的方式來寫css。